<script setup>
import {nextTick, ref} from "vue";
import {useStore} from "vuex";
import {putNote} from "@/api/note";
import {Toast} from "vant";
const store = useStore();

const props = defineProps({
  fileList: {
    type: Array,
    required: true
  },
  afterRead:{
    type: Function,
    required: true
  },
  handleDelete:{
    type:Function,
    required: false,
    default:()=>{
      console.log("delete");
    }
  },
  note:{
    type:Object,
    required: true
  },
  cleanNote:{
    type:Function,
    required: true
  }
})

const placeholder = ref("您的交友简介(介绍自己或对另一半的期待)...")
const send = async () => {
  const response = await putNote(props.note);
  if (response.status === 100){
    Toast.success("保存成功");
  } else {
    Toast.fail("保存失败");
  }
  props.cleanNote();
}

const refInput = ref(null)
const getFocus = async () => {
  const promise = await nextTick().then(() => {
    refInput.value.focus()
  })
}

</script>
<template>
    <div class="root">
      <van-row class="m-row">
        <van-col offset="8" span="8" class="m-col">放一张{{store.getters.getSexType}}纸条</van-col>
      </van-row>

      <div class="m-card-center-root">
        <div class="m-card-center-item">
          <van-field
              class="m-field"
              type="textarea"
              v-model="note.message"
              :placeholder="placeholder" />
        </div>

        <van-uploader
            class="m-file-upload"
            preview-size="10vh"
            :after-read="props.afterRead"
            :max-size="500 * 1024"
            v-model="fileList"
            :max-count="3"
            @delete="handleDelete"
        />

        <div class="m-input-vx">
          <span class="m-text" @click="getFocus">我的微信号:</span>
          <input type="text" class="m-input" ref="refInput" v-model="note.weChatNumber" placeholder="只有抽到你的人才能看到"/>
        </div>
      </div>
      <div class="m-btn">
        <van-button type="primary" @click="send" block color="#000000">确定放入</van-button>
      </div>
    </div>
</template>


<style scoped lang="less">
@m-root-height: 30vh;
@m-input-vx-height: 5vh;
.root{
  .m-row {
    padding-top: 2vh;
    .m-col {
      text-align: center;
    }
  }
  .m-card-center-root {
    box-sizing: border-box;
    margin: 2vh auto 0;
    width: 90%;
    height: @m-root-height;
    border: #333333 solid 2px;
    border-radius: 20px;
    overflow: hidden;
    position: relative;
    .m-file-upload{
      position: absolute;
      left: 20px;
      bottom: @m-input-vx-height;
    }
    .m-input-vx {
      position: absolute;
      width: 100%;
      height: @m-input-vx-height;
      bottom: 0;
      .m-text {
        box-sizing: border-box;
        padding-left: 20px;
        display: inline-block;
        font-size: 1em;
        text-align: center;
        line-height: @m-input-vx-height;
      }
      .m-input {
        border: none;
        position: absolute;
        box-sizing: border-box;
        display: inline-block;
        width: 50%;
        bottom: 0;
        right: 0;
        height: 100%;
        line-height: @m-input-vx-height;
      }
    }
  }
  .m-btn {
    width: 90%;
    margin: 2vh auto 0;
    overflow: hidden;
    border-radius: 7px;

  }
}
</style>
